<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表的展示</title>
</head>

<body>
    <div id="root">
        {{message}}
        <hr>
        <!-- 方式一 -->
        <p>{{movies}}</p>
        <hr>

        <!-- 方式二 -->
        <ul>
            <li>{{movies[0]}}</li>
            <li>{{movies[1]}}</li>
            <li>{{movies[2]}}</li>
            <li>{{movies[3]}}</li>
            <li>{{movies[4]}}</li>
            <li>{{movies[5]}}</li>
        </ul>
        <hr>

        <!-- 方式三 -->
        <!-- Angular里面叫repeat，Vue里面使用的是v-for -->
        <p v-for="item in movies">{{item}}</p>
        <hr>
        <!-- 方式四 -->
        <ul>
            <li v-for="(item,index) in movies">{{index}}-{{item}}</li>
        </ul>
    </div>
    <script src="../practice_project/js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#root', //挂载某个元素
            data: {
                message: 'Vue.js',
                movies: ['海王', '海贼王', '大话西游', '星际穿越', '少年派-奇幻漂流', '盗梦空间']
            }
        })
    </script>
</body>

</html>